<style lang="scss" scoped>
    .btn-group-vertical {
        .btn {
            text-align: left;
        }
    }
</style>
<template>
    <div class="btn-toolbar" role="toolbar" aria-label="toolbar">
        <div class="btn-group-vertical" role="group" aria-label="toolbar-group">
            <template v-for="menu in menus">
                <!-- 有二级菜单的按钮 -->
                <div class="btn-group"
                     role="group"
                     v-if="menu.type === 'dropdown'">
                    <button type="button"
                            class="btn dropdown-toggle"
                            :class="menu.extraClass"
                            :title="menu.title"
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"><i
                                :class="menu.icon"
                                aria-hidden="true"
                                v-if="menu.icon"></i>{{ menu.name }}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li v-for="subMenu in menu.subMenus">
                            <template v-if="subMenu.type === 'default'">
                                <a href="#"
                                   class="small"
                                   :class="subMenu.extraClass"
                                   :title="subMenu.title"
                                   @click.prevent="clickCallback(subMenu.callback)">
                                    <i :class="subMenu.icon"
                                       aria-hidden="true"
                                       v-if="subMenu.icon"></i>{{ subMenu.name }}</a>
                            </template>
                        </li>
                    </ul>
                </div>
                <!-- 普通按钮 -->
                <button type="button"
                        :class="[menu.extraClass, 'btn']"
                        :title="menu.title"
                        @click.prevent="clickCallback(menu.callback)"
                        role="button"
                        v-else><i
                        :class="menu.icon"
                        aria-hidden="true"
                        v-if="menu.icon"></i>{{ menu.name }}
                </button>
            </template>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import _ from 'lodash'
    export default {
        name: 'Toolbar',
        computed: {
            ...mapGetters({
                menus: 'toolbarMenus'
            })
        },
        methods: {
            clickCallback (callback) {
                if (_.isString(callback)) {
                    this.$store.dispatch(callback)
                }

                if (_.isArray(callback)) {
                    this.$store.dispatch(callback[0], callback[1])
                }
            }
        }
    }
</script>
